<template>
  <div class="wodeshendengzhi">
    <div class="wrap">
      <div class="tou">
        <router-link to="/person"><img class="img1" src="../../assets/个人中心/1个人中心/jiantou.png" /></router-link>
        <p>我的神灯值</p>
        <img  class="img2" src="../../assets/个人中心/1个人中心/sangedian.png"/>
      </div>
      <div class="red">
        <div class="gray"></div>
        <p>昵称</p>
        <span>100</span>
        <nav>神灯规则</nav>
        <img class="img1" src="../../assets/个人中心/1个人中心/xiaoji.png"/>
        <img class="img2" src="../../assets/个人中心/1个人中心/wenhao.png"/>
      </div>
      <div class="hua">
        <div>
          <p>今年购物抵钱已省</p>
          <p>0￥</p>
        </div>
        <div>
          <p>今年神灯值抵扣订单</p>
          <p>0笔</p>
        </div>
      </div>
      <ul class="duihuan">
        <li>
          <img class="img"  src="../../assets/个人中心/1个人中心/qianbi.png"/>
          <p @click="duihuan">兑换记录</p>
          <img class="a" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li>
          <img class="img" src="../../assets/个人中心/1个人中心/xiaoji2.png"/>
          <p @click="mingxi">神灯值明细</p>
          <img class="a" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
      </ul>
      <div class="tuijian">
        <span></span>
        <p>神灯猜你喜欢</p>
        <span></span>
      </div>
      <div class="cont">
        <ul class="shangpin">
          <li class="li3">
            <div>
              <img src="../../assets/个人中心/1个人中心/shuang.png"/>
            </div>
            <nav>
              <p>蜗牛饰容BB霜50g</p>
              <span>500</span>
              <img src="../../assets/个人中心/1个人中心/xiaoji.png"/>
              <del>￥22.30</del>
            </nav>
          </li>
          <li class="li4">
            <div>
              <img src="../../assets/个人中心/1个人中心/shuang.png"/>
            </div>
            <nav>
              <p>蜗牛饰容BB霜50g</p>
              <span>500</span>
              <img src="../../assets/个人中心/1个人中心/xiaoji.png"/>
              <del>￥22.30</del>
            </nav>
          </li>
        </ul>
      </div>
      <div class="cont">
        <ul class="shangpin">
          <li class="li3">
            <div>
              <img src="../../assets/个人中心/1个人中心/shuang.png"/>
            </div>
            <nav>
              <p>蜗牛饰容BB霜50g</p>
              <span>500</span>
              <img src="../../assets/个人中心/1个人中心/xiaoji.png"/>
              <del>￥22.30</del>
            </nav>
          </li>
          <li class="li4">
            <div>
              <img src="../../assets/个人中心/1个人中心/shuang.png"/>
            </div>
            <nav>
              <p>蜗牛饰容BB霜50g</p>
              <span>500</span>
              <img src="../../assets/个人中心/1个人中心/xiaoji.png"/>
              <del>￥22.30</del>
            </nav>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style>

  .wodeshendengzhi .wrap{
    width: 100%;
  }
  .wodeshendengzhi .tou{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  .wodeshendengzhi .tou .img1{
    position: absolute;
    width: 0.638rem;
    height: 1.055rem;
    left: 0.555rem;
  }
  .wodeshendengzhi .tou .img2{
    top: 1.388rem;
    position: absolute;
    right: 0.555rem;
    width: 0.944rem;
    height: 0.25rem;
  }
  .wodeshendengzhi .tou p{
    position: absolute;
    top: 1rem;
    height: 0.972rem;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .wodeshendengzhi .red{
    width: 100%;
    height: 6.666rem;
    background: #E53E42;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .wodeshendengzhi .red .gray{
    width:2.777rem;
    height: 2.777rem;
    background-color: #ffffff;
    border: solid 1px #cccccc;
    border-radius: 50%;
    margin-top: 0.444rem;
  }
  .wodeshendengzhi .red p{
    position: absolute;
    height: 0.666rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #ffffff;
    bottom: 2.361rem;
  }
  .wodeshendengzhi .red span{
    position: absolute;
    height: 1.027rem;
    font-size: 1.333rem;
    line-height: 1rem;
    letter-spacing: 1px;
    color: #ffd21f;
    bottom: 0.75rem;
  }
  .wodeshendengzhi .red .img1{
    width: 1.111rem;
    height: 0.722rem;
    position: absolute;
    bottom: 0.555rem;
    right: 7.5rem;
  }
  .wodeshendengzhi .red nav{
    position: absolute;
    height: 0.666rem;
    top: 0.555rem;
    right: 0.555rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .wodeshendengzhi .red .img2{
    position: absolute;
    width: 0.833rem;
    height: 0.833rem;
    right: 3.755rem;
    top: 0.638rem;
  }
  .wodeshendengzhi .hua{
    width: 100%;
    height: 2.222rem;
    display: flex;
    background: #E53E42;
  }
  .wodeshendengzhi .hua div{
    flex: 1;
    width: 50%;
    height: 100%;
    justify-content: center;
    position: relative;
  }
  .wodeshendengzhi .hua div:nth-child(1){
    border-right: 1px solid #CCCCCC;
    box-sizing: border-box;
  }
  .wodeshendengzhi .hua p{
    text-align: center;
    width: 100%;
    height: 0.638rem;
    line-height:1.5rem;
    font-size: 0.666rem;
    color: #f6babb;
  }
  .wodeshendengzhi .hua p:nth-child(2){
    line-height:1.5rem;
    position: absolute;
    bottom: 0.555rem;
    color: white;
  }
  .wodeshendengzhi .duihuan{
    width: 100%;
    height: 4.5rem;
  }
  .wodeshendengzhi .duihuan li{
    width: 100%;
    height: 2.222rem;
    border-bottom: 1px solid #CCCCCC;
    display: flex;
    align-items: center;
    position: relative;
  }
  .wodeshendengzhi .duihuan li .img{
    position: absolute;
    left: 0.555rem;
    width: 0.833rem;
    height: 0.861rem;
  }
  .wodeshendengzhi .duihuan li p{
    position: absolute;
    top: 0.722rem;
    left: 1.944rem;
    height: 0.75rem;
    font-size: 0.777rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .wodeshendengzhi .duihuan li .a{
    width: 0.277rem;
    height: 0.5rem;
    position: absolute;
    right: 0.555rem;
  }
  .wodeshendengzhi .tuijian{
    width: 100%;
    height: 2.777rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wodeshendengzhi .tuijian span{
    margin-right: 0.1rem;
    width: 4.166rem;
    height: 1px;
    background: #CCCCCC;
  }
  .wodeshendengzhi .tuijian p{
    font-size: 0.833rem;
  }
  .wodeshendengzhi .cont{
    width: 100%;
    height: 11.388rem;
    background: white;
    position: relative;
    margin-bottom: 0.555rem;
  }
  .wodeshendengzhi .cont .shangpin{
    margin: 0 auto;
    margin-left: 0.555rem;
    margin-right: 0.555rem;
  }
  .wodeshendengzhi .shangpin li{
    text-align: center;
    width: 9.166rem;
    height: 11.388rem;
    position: relative;
    box-sizing: border-box;
  }
  .wodeshendengzhi .shangpin .li3{
    margin-right: 0.555rem;
    float: left;
  }
  .wodeshendengzhi .shangpin .li4{
    float: right;
  }
  .wodeshendengzhi .shangpin div{
    width: 9.111rem;
    height: 7.277rem;
    border: 1px solid #CCCCCC;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wodeshendengzhi .shangpin nav{
    width: 9.111rem;
    height: 4.027rem;
    border:1px solid #CCCCCC;
    border-top: none;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .wodeshendengzhi .shangpin div img{
    width: 1.777rem;
    height: 3.944rem;
  }
  .wodeshendengzhi .shangpin nav p{
    position: absolute;
    top: 0.555rem;
    height: 0.666rem;
    font-size: 0.666rem;
    line-height: 0.861rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .wodeshendengzhi .shangpin span{
    position: absolute;
    top: 1.638rem;
    left: 3.472rem;
    height: 0.5rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #e53e42;
  }
  .wodeshendengzhi .shangpin nav img{
    width: 0.666rem;
    height: 0.444rem;
    position: absolute;
    top: 1.9rem;
    left: 5.1rem;
  }
  .wodeshendengzhi .shangpin nav del{
    position: absolute;
    height: 0.472rem;
    font-size: 0.611rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #808080;
    bottom: 0.666rem;
  }
</style>
